<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="comment">
        <!--登录-->
        <div class="loginbox" v-show="loginStatus" @click="loginboxClick()" style="display:none;">
            <div class="box" @click="stopProp()">
                <h3>用户登录</h3>
                <form name="login" id="login">
                    <input type="text" placeholder="请输入用户名" class="username">
                    <input type="password" placeholder="请输入登录密码" class="psw">
                    <input type="button" value="立即登录" @click="login()">
                    <input type="button" value="立即注册" @click="showregister()" class="blueBtn">
                </form>
            </div>
        </div>
        <!--登录-->

        <!--注册-->
        <div class="loginbox registerbox" v-show="registerStatus" @click="registerboxClick()" style="display:none;">
            <div class="box" @click="stopProp()">
                <h3>用户注册</h3>
                <form name="register" id="register">
                    <input type="text" placeholder="请输入用户名" class="username">
                    <input type="password" placeholder="请输入登录密码" class="psw">
                    <input type="button" value="立即注册" @click="register()">
                    <input type="button" value="立即登录" @click="showLogin()" class="blueBtn">
                </form>
            </div>
        </div>
        <!--注册-->

        <!--评论-->
        <div class="commentbox">
            <div class="userbar" v-show="userbarStatus" style="display:none;">
                <img :src="'img/'+currentUser.userimg" alt="" title="" class="userimg">
                <span class="loginout" @click="loginout()">退出账号&nbsp;&nbsp;<i class="icon-style icon-signout"></i></span>
                <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md">&nbsp;</i></span>
                <p><span class="userword" v-text="currentUser.words" contenteditable="false"></span><i class="icon-style icon-edit" @click="editUserWords()"></i></p>
            </div>
            <div class=" commemtlist ">
                <dl v-for="(value, index) in comments ">
                    <dt>
                        <img :src=" 'img/'+value.userimg ">
                        <span class="username ">{{value.username}}</span>
                    </dt>
                    <dd class="commentwords "><i class="icon-style icon-file-alt "></i>{{value.words}}</dd>
                    <dd class="btbar ">
                        <span class="like red "><i class="icon-style icon-thumbs-up "></i>点赞(<strong @click="like(index) ">{{value.like}}</strong>)</span>
                        <span class="notlike red "><i class="icon-style icon-thumbs-down "></i>点踩(<strong @click="notlike(index) ">{{value.nolike}}</strong>)</span>
                        <span class="data red "><i class="icon-style icon-calendar "></i>时间<strong>{{value.time}}</strong></span>
                    </dd>
                </dl>
                <div class="wordsbox ">
                    <textarea placeholder="请输入留言 "></textarea>
                    <span @click="showLogin()" v-show="lrBtnStatus">登录</span>
                    <span @click="showregister()" v-show="lrBtnStatus">注册</span>
                    <input type="submit" value="提交 " @click="subCommont()" />
                </div>
            </div>
        </div>
        <!--评论-->

    </div>
</body>

</html>
<script src="js/index.js "></script>